import React from 'react';
import '../../static/setting/index.styl'
import {Icon, Modal, Button, Form, Input, message,} from 'antd';
import axios from 'axios'

const FormItem = Form.Item;

function Title() {
  return <div>
    <div className="modalTitle">
      <Icon type="plus" style={{fontSize: '24px', color: '#007be2'}}/>
    </div>
    <span>添加关键词</span>
  </div>
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {parentId: props.parentId}
  }

  componentWillReceiveProps(nextProps) {
    this.setState({parentId: nextProps.parentId});

  }

  hideModal = () => {
    this.props.onHide()
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err, values) => {
      if (!err) {
        let res = await
          axios.post('vrv-monitor-platform-web/moniterkey/insert', {
            name: values.name,
            parentId: this.state.parentId,
            distKeyword: values.distKeyword,
            nameKeyword: values.nameKeyword,
            eventKeyword: values.eventKeyword,
            excludeKeyword: values.excludeKeyword,
            advanced: 0
          })
        if (res.data.statusCode === 200) {
          this.props.settingActions.fetchKeywordlist({
            parentId: this.state.parentId,
            pageNum: 1,
            pageSize: 5
          })
          this.hideModal()
        } else {
          message.error(res.data.message)
        }
      }
    });
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 16},
    }
    const buttonItemLayout = {
      wrapperCol: {span: 20, offset: 2}
    }
    return (
      <Modal
        title={<Title/>}
        visible={true}
        footer={null}
        onCancel={this.hideModal}
        style={{top:'20%'}}
      >
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            label="关键词名"
            {...formItemLayout}
          >
            {getFieldDecorator('name', {
              rules: [{required: true, message: '关键词名不能为空!'}],
            })(
              <Input placeholder="请输入关键词"/>
            )}
          </FormItem>
          <FormItem
            label="地名"
            {...formItemLayout}
          >
            {getFieldDecorator('distKeyword', {
              rules: [{required: true, message: '地名不能为空!'}],
            })(
              <Input placeholder="请输入地名"/>
            )}
          </FormItem>
          <FormItem
            label="人名"
            {...formItemLayout}
          >
            {getFieldDecorator('nameKeyword', {
              rules: [{required: true, message: '人名不能为空!'}],
            })(
              <Input placeholder="请输入人名"/>
            )}
          </FormItem>
          <FormItem
            label="事件名"
            {...formItemLayout}
          >
            {getFieldDecorator('eventKeyword', {
              rules: [{required: true, message: '事件名不能为空!'}],
            })(
              <Input placeholder="请输入事件名"/>
            )}
          </FormItem>
          <FormItem
            label="排除"
            {...formItemLayout}
          >
            {getFieldDecorator('excludeKeyword')(
              <Input placeholder="请输入排除名"/>
            )}
          </FormItem>
          <FormItem {...buttonItemLayout} style={{textAlign: 'right',marginBottom:0}}>
            <Button onClick={this.hideModal}>取消</Button>
            <Button type="primary" style={{marginLeft: '20px'}} htmlType="submit">确认</Button>
          </FormItem>
        </Form>
      </Modal>
    );
  }
}

const AddKeyword = Form.create()(App);
export default AddKeyword